<template>
  <el-popover :width="170" trigger="click" popper-class="popper" :offset="15" :hide-after="0">
    <template #reference>
      <el-icon class="top-bar-right-item" :size="24"><ArrowDown /></el-icon>
    </template>
    <div class="popover-content">
      <div class="more-item" @click="onBindWeiXin">微信账号绑定</div>
      <div class="more-item" @click="onChangeThemeColor">切换主题色</div>
      <div class="more-item" @click="onlogout">退出登录</div>
    </div>
  </el-popover>
  <wei-xin-bind-drawer ref="WeiXinBindDrawerRef"></wei-xin-bind-drawer>
</template>

<script setup lang="ts">
import { RouteRecordName, RouteRecordRaw, useRouter } from 'vue-router';
import { useThemeStore } from '../../store/theme';
import { useUserStore } from '../../store/user';
import { ElMessage } from 'element-plus';
import WeiXinBindDrawer from './WeiXinBindDrawer.vue';
import { ref } from 'vue';

const themeStore = useThemeStore();
const userStore = useUserStore();
const router = useRouter();
const WeiXinBindDrawerRef = ref();

const onlogout = () => {
  router.replace('/login');
  //清本地缓存
  localStorage.clear();
  //清动态路由，否则切换角色登陆时，会造成还是加载上一个角色的组件问题，进而导致更多问题。
  userStore.roleRoutes.forEach((item: RouteRecordRaw) => {
    router.removeRoute(item.name as RouteRecordName);
  });
  // location.reload();  //也可以刷新页面，让动态路由清空. 但不推荐
  userStore.clearStore();
  themeStore.clearStore();
};
const onChangeThemeColor = () => {
  themeStore.saveThemeToLocal();
  themeStore.changeThemeColor();
};

const onBindWeiXin = () => {
  WeiXinBindDrawerRef.value.open();
}
</script>

<style lang="scss" scoped>
.top-bar-right-item {
  margin: 0 8px;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.5s ease;
}
.top-bar-right-item:hover {
  transform: translateY(-6px);
  transition: all 0.3s ease;
}

.more-item {
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: relative;
  height: 30px;
  margin: 8px 16px;
  color: var(--font-color);
  cursor: pointer;
  // border-left: 1px solid #f5f5f5a3;
}

.more-item::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: var(--border-color);
  transform-origin: center;
  transform: translate(-50%, 0) scaleX(0);
  transition: transform 0.3s ease-in-out;
}

.more-item:hover::before {
  transform: translate(-50%, 0) scaleX(1);
}

.popover-content {
  height: 300px;
}
</style>
